<template>
    <div class="app">
      <!-- {{ this.$store.getters.myHide.states }} -->
       
            <div class="left">
               <div class="img"><img src="../../public/logo.png" alt=""><span class="logo">白泽影视</span></div> 
            </div>
    
            <search></search>
    
           <div class="menu">
           <el-menu  class="el-menu-demo" mode="horizontal" @select="handleSelect" :router=true>
           <el-menu-item index="7">热门影视推荐</el-menu-item>  
      <el-submenu index="8">
        <template slot="title">影视分类推荐</template>
        <!-- <el-menu-item index="2-1">电视剧</el-menu-item> -->
        <el-menu-item index="8-1">热血</el-menu-item>
        <el-menu-item index="8-2">奇幻</el-menu-item>
      </el-submenu>
      <el-menu-item index="9">猜你喜欢</el-menu-item>  
      <el-menu-item index="10">个人中心</el-menu-item>  
    </el-menu>   
   
           </div>
     
           <div class="right">
            <el-dropdown>
  <span class="el-dropdown-link"><div class="name"> {{ user[0].name}}</div>
 <!-- <i class="el-icon-arrow-down el-icon--right">
      <img   :src="'http://192.168.137.1:8889'+'/'+this.user[0].imgSrc+'.jpg'"/>
   </i> -->
   <img  class="i" :src="'http://localhost:8889'+'/'+this.user[0].imgSrc+'.jpg'"/>
  </span>
  <div class="exit">
    <el-dropdown-menu slot="dropdown">
    <el-dropdown-item divided> <div><router-link to="/exit">  <div @click="exit" >退出登录</div> </router-link>  </div>  </el-dropdown-item>
  </el-dropdown-menu>
  </div>
  
</el-dropdown>
        
           </div>
    
           
    </div>
    
    
    </template>
    <script>

import {mapGetters,mapActions} from 'vuex';
    import search from "../components/search.vue"
     export default {
      components:{
        search
      }
     ,
      data() {
        return {
          user:"",
      
            
        
        }
      },
      created(){
          this.user=JSON.parse(localStorage.getItem("user"))
          // console.log(this.user)
          // console.log(this.user[0].imgSrc)
         
      }
,
      
      methods:{
          handleSelect(key, keyPath) {
            //点击事件
            console.log(key, keyPath);
          },
        
        ...mapActions({
            // hide:"hide"
         })
         ,
         exit(){
          // localStorage.removeItem("like")
          //  console.log(this.$store.state.user.user[0].id)
          this.$axios({
             method:"get",
             url:this.$host+"/updateState",
             params:{
             id:JSON.parse(window.localStorage.getItem("user"))[0].id  
              //  id:this.$store.state.user.user[0].id
             }
          }).then(resp=>{
                 
          })



         }
     
        
       
        }
    
    }
    
    </script>
    
    <style scoped>
  .el-dropdown-menu{
      margin-top: -30px;

  }
    
    .i{
      position: relative;
       left: 17px;
       top: -32px;
    }
    .name{
       position: relative;
       left: -37px;
       top: 0px;
       color: blue;
       font-size: 16px;
       font-weight: 600;
    }


   img[data-v-7fb1f02e] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
    a{
        text-decoration: none;
        color: black;
    }
    .app{
        width: 100%;
        display: flex;
    
    }
            img{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
            .img{
                width: 160px;
                height: 50px;
                border-radius: 50%;
             
            }
            .logo{
                color: blue;
                font-size: 25px;
                font-weight: 900;
                font-style: italic;
                font-family:"微软雅黑";
                position: relative;
                top: -16px;
                margin-left: 10px;           
            }
            .left{
                 
                width: 160px;
                height: 50px;
                margin-left: 32px;
            }
          
            .menu{

              
               position: relative;
               left: 250px;
               top: -10px;
    
            }
          .right{
            width: 110px;
              position:relative;
              left: 396px;
              top: 14px;
             
          }
          .right>span{
           
              color: blue;
              cursor: pointer;
    
          }
         
       
    </style>
    